*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.15;
  color: #303133;
  background-color: #fff;
}
a {
  color: mix(#fff, $--color-primary, 20%);
  text-decoration: none;
  &:focus,
  &:hover {
    color: $--color-primary;
    text-decoration: underline;
  }
}
img {
  vertical-align: middle;
}
ul,
li {
  list-style: none;
}

// font
@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_2029671_b6y82d7d7qn.eot?t=1601359894975'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2029671_b6y82d7d7qn.eot?t=1601359894975#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('//at.alicdn.com/t/font_2029671_b6y82d7d7qn.woff?t=1601359894975') format('woff'),
  url('//at.alicdn.com/t/font_2029671_b6y82d7d7qn.ttf?t=1601359894975') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_2029671_b6y82d7d7qn.svg?t=1601359894975#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-save:before {
  content: "\e6fe";
}

.icon-save-as:before {
  content: "\e6ff";
}
.icon-add:before {
  content: "\e6cd";
}
.icon-text-align-left:before {
  content: "\e600";
}

.icon-text-align-right:before {
  content: "\e601";
}

.icon-text-align-center:before {
  content: "\e602";
}

.icon-align-left:before {
  content: "\e603";
}

.icon-align-right:before {
  content: "\e604";
}

.icon-align-center:before {
  content: "\e605";
}

.icon-align-top:before {
  content: "\e606";
}

.icon-align-middle:before {
  content: "\e607";
}

.icon-align-bottom:before {
  content: "\e608";
}

.icon-align-h:before {
  content: "\e609";
}

.icon-align-v:before {
  content: "\e60a";
}

.icon-layer-bottom:before {
  content: "\e60b";
}

.icon-layer-top:before {
  content: "\e60c";
}

.icon-fullscreen:before {
  content: "\e63d";
}

.icon-height:before {
  content: "\e63c";
}

.icon-width:before {
  content: "\e63e";
}

.icon-dynamic:before {
  content: "\e641";
}

.icon-mix:before {
  content: "\e657";
}

.icon-hdmi:before {
  content: "\e962";
}

.icon-doc:before {
  content: "\e679";
}

.icon-button:before {
  content: "\e690";
}

.icon-audio:before {
  content: "\e671";
}

.icon-video:before {
  content: "\e678";
}

.icon-image:before {
  content: "\e69d";
}

.icon-text:before {
  content: "\e69e";
}

.icon-explorer:before {
  content: "\e60d";
}

.icon-weather:before {
  content: "\e6ec";
}

.icon-clock:before {
  content: "\e73e";
}

.icon-live:before {
  content: "\e65b";
}

.icon-uncheck:before {
  content: "\e615";
}

.icon-checked:before {
  content: "\e614";
}

.icon-edit:before {
  content: "\e621";
}

.icon-delete:before {
  content: "\e674";
}
.icon-layer-up:before {
  content: "\e616";
}

.icon-layer-down:before {
  content: "\e617";
}

.icon-copy:before {
  content: "\e780";
}

.icon-lock:before {
  content: "\e6ac";
}
.icon-unlock:before {
  content: "\e713";
}
.icon-right:before {
  content: "\e6b5";
}
.icon-wrong:before {
  content: "\e6cc";
}
/**  font end **/

/* Utils
------------------------------ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.dn {
  display: none !important;
}
.mt0 {
  margin-top: 0px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.blod {
  font-weight: bold !important;
}
.txt-el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
// 滚动条
.scroll-light::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #eee
}

.scroll-light::-webkit-scrollbar-track {
  background-color: #fff
}

.scroll-light::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,.4)
}

.scroll-light::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,.6)
}

.scroll-dark::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent
}

.scroll-dark::-webkit-scrollbar-track {
  background-color: transparent
}

.scroll-dark::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,.2)
}

.scroll-dark::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,.5)
}

.scroll-large::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent
}

.scroll-large::-webkit-scrollbar-thumb {
  border-radius: 6px
}

.scroll-small::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent
}

.scroll-small::-webkit-scrollbar-thumb {
  border-radius: 3px
}

.scroll-mini::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: transparent
}

.scroll-mini::-webkit-scrollbar-thumb {
  border-radius: 2px
}

/* Animation
------------------------------ */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}


/* Reset element-ui
------------------------------ */
.site-wrapper {
  .el-pagination {
    margin-top: 15px;
    text-align: right;
  }
}
.el-button--info {
  &.is-plain {
    border-color: #a2aab5;
    background-color: #a2aab5;
    color: $white;
    &:hover {
      background-color: #b5bbc4 !important;
      border-color: #b5bbc4 !important;
    }
  }
}


/* Layout
------------------------------ */
.site-wrapper {
  position: relative;
  min-width: 1180px;
}

.site-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}
/* Sidebar fold
------------------------------ */
.site-sidebar--fold {
  .site-navbar__header,
  .site-navbar__brand,
  .site-sidebar,
  .site-sidebar__inner,
  .el-menu.site-sidebar__menu {
    width: 64px;
  }
  .site-navbar__body,
  .site-content__wrapper {
    margin-left: 64px;
  }
  .site-navbar__brand {
    &-lg {
      display: none;
    }
    &-mini {
      display: inline-block;
    }
  }
  .site-sidebar,
  .site-sidebar__inner {
    overflow: initial;
  }
  .site-sidebar__menu-icon {
    margin-right: 0;
    font-size: 20px;
  }
  .site-content--tabs > .el-tabs > .el-tabs__header {
    left: 64px;
  }
}
// animation
.site-navbar__header,
.site-navbar__brand,
.site-navbar__body,
.site-sidebar,
.site-sidebar__inner,
.site-sidebar__menu.el-menu,
.site-sidebar__menu-icon,
.site-content__wrapper,
.site-content--tabs > .el-tabs .el-tabs__header {
  transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s;
}


/* Navbar
------------------------------ */
.site-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  background-color: $navbar--background-color;
  &.flex {
    display: flex;
    position: relative;
    .site-navbar__body {
      display: flex;
      flex-direction: row;
      flex: 2;
    }
  }
  &--inverse {
    .site-navbar__body {
      background-color: transparent;
    }
    .el-menu {
      > .el-menu-item,
      > .el-submenu > .el-submenu__title {
        color: #fff;
        &:focus,
        &:hover {
          color: #fff;
          background-color: mix(#000, $navbar--background-color, 15%);
        }
      }
      > .el-menu-item.is-active,
      > .el-submenu.is-active > .el-submenu__title {
        border-bottom-color: mix(#fff, $navbar--background-color, 85%);
      }
      .el-menu-item i,
      .el-submenu__title i,
      .el-dropdown {
        color: #fff;
      }
    }
    .el-menu--popup-bottom-start {
      background-color: $navbar--background-color;
    }
  }

  &__header {
    position: relative;
    float: left;
    width: 230px;
    height: 50px;
    overflow: hidden;
  }
  &__brand {
    display: table-cell;
    vertical-align: middle;
    width: 230px;
    height: 50px;
    margin: 0;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;

    &-lg,
    &-mini {
      margin: 0 5px;
      color: #fff;
      &:focus,
      &:hover {
        color: #fff;
        text-decoration: none;
      }
    }
    &-mini {
      display: none;
    }
  }
  &__switch {
    font-size: 18px;
    border-bottom: none !important;
  }
  &__avatar {
    border-bottom: none !important;
    * {
      vertical-align: inherit;
    }
    .el-dropdown-link {
      > img {
        width: 36px;
        height: auto;
        margin-right: 5px;
        border-radius: 100%;
        vertical-align: middle;
      }
    }
  }
  &__body {
    position: relative;
    margin-left: 230px;
    padding-right: 15px;
    background-color: #fff;
  }
  &__menu {
    float: left;
    background-color: transparent;
    border-bottom: 0;

    &--right {
      float: right;
    }
    a:focus,
    a:hover {
      text-decoration: none;
    }
    .el-menu-item,
    .el-submenu > .el-submenu__title {
      height: 50px;
      line-height: 50px;
    }
    .el-submenu > .el-menu {
      top: 55px;
    }
    .el-badge {
      display: inline;
      z-index: 2;
      &__content {
        line-height: 16px;
      }
    }
  }
}


/* Sidebar
------------------------------ */
.site-sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  z-index: 1020;
  width: 230px;
  overflow: hidden;

  &--dark,
  &--dark-popper {
    background-color: $sidebar--background-color-dark;
    .site-sidebar__menu.el-menu,
    > .el-menu--popup {
      background-color: $sidebar--background-color-dark;
      .el-menu-item,
      .el-submenu > .el-submenu__title {
        color: $sidebar--color-text-dark;
        &:focus,
        &:hover {
          color: mix(#fff, $sidebar--color-text-dark, 50%);
          background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
        }
      }
      .el-menu,
      .el-submenu.is-opened {
        background-color: mix(#000, $sidebar--background-color-dark, 15%);
      }
      .el-menu-item.is-active,
      .el-submenu.is-active > .el-submenu__title {
        color: mix(#fff, $sidebar--color-text-dark, 80%);
      }
    }
  }
  &__inner {
    position: relative;
    z-index: 1;
    width: 250px;
    height: 100%;
    padding-bottom: 15px;
    overflow-y: scroll;
  }
  &__menu.el-menu {
    width: 230px;
    border-right: 0;
  }
  &__menu-icon {
    width: 24px;
    margin-right: 5px;
    text-align: center;
    font-size: 16px;
    color: inherit !important;
  }
}


/* Content
------------------------------ */
.site-content {
  position: relative;
  padding: 15px;

  &__wrapper {
    position: relative;
    padding-top: 50px;
    margin-left: 230px;
    min-height: 100%;
    background: $content--background-color;
  }
  &--tabs {
    padding: 55px 0 0;
  }
  > .el-tabs {
    > .el-tabs__header {
      position: fixed;
      top: 50px;
      left: 230px;
      right: 0;
      z-index: 930;
      padding: 0 55px 0 15px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      background-color: #fff;
      > .el-tabs__nav-wrap {
        margin-bottom: 0;
        &:after {
          display: none;
        }
      }
    }
    > .el-tabs__content {
      padding: 0 15px 15px;
      > .site-tabs__tools {
        position: fixed;
        top: 50px;
        right: 0;
        z-index: 931;
        height: 40px;
        padding: 0 12px;
        font-size: 16px;
        line-height: 40px;
        background-color: $content--background-color;
        cursor: pointer;
        .el-icon--right {
          margin-left: 0;
        }
      }
    }
  }
}
.el-table__expand-icon {
  display: inline-block;
  width: 14px;
  vertical-align: middle;
  margin-right: 5px;
}

// 页面提示
.page-tmp-tip {
  position: fixed;
  top: 50px;
  left: calc( 50% - 170px );
  width: 340px;
  height: 33px;
  background-color: transparent;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  &.info {
    background: $--color-primary;
  }
}
// 设置面板
.setting-pannel-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  height: 100%;
  .label {
    display: block;
    margin: 10px 15px 8px;
    padding: 0;
    color: #4c4c4c;
    text-align: left;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
  }
}
.file-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  .item-wrap {
    width: 100%;
    height: 155px;
    display: flex;
    flex-direction: row;
    position: relative;
    .item {
      width: 80%;
      background-size: 100%;
    }
    .el-form-item {
      .attr-item-edit-wrapper {
        width: 120px !important;
        padding-left: 0 !important;
      }
      .el-form-item__label {
        padding-right: 0 !important;
      }
    }
  }
  .item-wrap-line {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .item {
    color: $--color-primary;
    margin-top: 12px;
    width: 100%;
    height: 140px;
    line-height: 140px;
    background: $white;
    text-align: center;
    vertical-align: middle;
    position: relative;
    .iconfont {
      cursor: pointer;
      font-size: 40px;
    }
    .icon-add {
      font-size: 80px;
    }
    .tool-list {
      position: absolute;
      top: 0;
      right: 0;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      i {
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: rgba(0,0,0,0.6);
        color: #ffffff;
        font-size: 16px;
      }
    }
  }
}

/* 按钮 */
// 添加素材按钮
.add-assets-wrap {
  position: relative;
  margin: 10px 0;
  box-shadow: none;
  background: #ffffff;
  border: 1px solid #dddddd;
  margin-bottom: 8px;
  .btn-add-inner {
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .iconfont {
    font-size: 40px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    color: #666666;
  }
  &:hover {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
  }
}

/** 属性设置 **/
.attr-item-edit-wrapper {
  padding-left: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 225px;
  text-align: center;
  margin-bottom: 10px;
  &.col {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    .left {
      min-width: 60px;
    }
  }
  &.row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .col-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    &.col-2 {
      margin-left: 0;
      margin-right: 10px;
    }
    &.col-3 {
      width: auto;
      margin-left: 0;
      margin-right: 10px;
    }
    &.col-4 {
      margin-left: 0;
      margin-right: 10px;
    }
  }
  .attr-item-title {
    text-align: left;
    min-width: 60px;
    font-size: 12px;
  }
  .attr-item-edit-input {
    &.col-2 {
      width: 90px;
      margin-left: 10px;
    }
    &.col-1 {
      width: 250px;
    }
    &.col-3 {
      width: 60px;
      margin-left: 10px;
    }
    &.col-4 {
      width: 50px;
      margin-left: 10px;
    }
    .attr-item-edit-input-des {
      text-align: center;
      line-height: 1;
      margin-top: 8px;
      font-size: 12px;
      color: $gray;
    }
  }
}
.attr-item-edit-wrapper {
  .el-input-number.is-controls-right .el-input__inner {
    padding-left: 2px;
    padding-right: 32px;
    width: 90px;
  }
  .el-input-number--mini {
    width: 90px;
  }
  .el-slider__runway.show-input {
    margin-right: 108px;
  }
}
